<template>
  <div>
    <v-card title="视觉映射">
      <vcu-chart-geo
        :title="title"
        :data="chartData"
        :settings="chartSettings"
        :legend-visible="false"
        background-color="#020933"
        @click="onClick"
        @blankClick="onClickBlank"
      />
    </v-card>
  </div>
</template>

<script>
const randomData = () => {
  return Math.round(Math.random() * 1000);
};
export default {
  data() {
    return {
      title: {},
      provinceInfo: [
        { id: "1", name: "北京", pinyin: "beijing" },
        { id: "2", name: "上海", pinyin: "shanghai" },
        { id: "3", name: "天津", pinyin: "tianjin" },
        { id: "4", name: "重庆", pinyin: "chongqing" },
        { id: "5", name: "河北", pinyin: "hebei" },
        { id: "6", name: "山西", pinyin: "shanxi" },
        { id: "7", name: "河南", pinyin: "henan" },
        { id: "8", name: "辽宁", pinyin: "liaoning" },
        { id: "9", name: "吉林", pinyin: "jilin" },
        { id: "10", name: "黑龙江", pinyin: "heilongjiang" },
        { id: "11", name: "内蒙古", pinyin: "neimenggu" },
        { id: "12", name: "江苏", pinyin: "jiangsu" },
        { id: "13", name: "山东", pinyin: "shandong" },
        { id: "14", name: "安徽", pinyin: "anhui" },
        { id: "15", name: "浙江", pinyin: "zejiang" },
        { id: "16", name: "福建", pinyin: "fujian" },
        { id: "17", name: "湖北", pinyin: "hubei" },
        { id: "18", name: "湖南", pinyin: "hunan" },
        { id: "19", name: "广东", pinyin: "guangdong" },
        { id: "20", name: "广西", pinyin: "guangxi" },
        { id: "21", name: "江西", pinyin: "jiangxi" },
        { id: "22", name: "四川", pinyin: "sichuan" },
        { id: "23", name: "海南", pinyin: "hainan" },
        { id: "24", name: "贵州", pinyin: "guizhou" },
        { id: "25", name: "云南", pinyin: "yunnan" },
        { id: "26", name: "西藏", pinyin: "xizang" },
        { id: "27", name: "陕西", pinyin: "shanxi" },
        { id: "28", name: "甘肃", pinyin: "gansu" },
        { id: "29", name: "青海", pinyin: "qinghai" },
        { id: "30", name: "宁夏", pinyin: "ningxia" },
        { id: "31", name: "新疆", pinyin: "xinjiang" },
        { id: "32", name: "台湾", pinyin: "taiwan" },
        { id: "33", name: "香港", pinyin: "xianggang" },
        { id: "34", name: "澳门", pinyin: "aomen" },
      ],
      chartData: {
        measures: [
          {
            name: "iPhone XR",
            data: [
              { name: "北京市", value: randomData() },
              { name: "鄂尔多斯", value: randomData() },
              { name: "天津市", value: randomData() },
              { name: "重庆市", value: randomData() },
              { name: "齐齐哈尔", value: randomData() },
              { name: "桂林", value: randomData() },
              { name: "赤峰", value: randomData() },
              { name: "青岛", value: randomData() },
              { name: "乳山", value: randomData() },
              { name: "泉州", value: randomData() },
              { name: "文登", value: randomData() },
              { name: "烟台", value: randomData() },
              { name: "长沙", value: randomData() },
              { name: "阳泉", value: randomData() },
              { name: "贵阳", value: randomData() },
              { name: "威海", value: randomData() },
              { name: "宿迁", value: randomData() },
              { name: "珠海", value: randomData() },
              { name: "海口", value: randomData() },
              { name: "佛山", value: randomData() },
              { name: "广州", value: randomData() },
              { name: "乌鲁木齐", value: randomData() },
              { name: "葫芦岛", value: randomData() },
              { name: "连云港", value: randomData() },
              { name: "昆明", value: randomData() },
              { name: "大理", value: randomData() },
              { name: "丽江", value: randomData() },
              { name: "成都", value: randomData() },
              { name: "乐山", value: randomData() },
              { name: "宁波", value: randomData() },
              { name: "杭州", value: randomData() },
              { name: "深圳", value: randomData() },
              { name: "武汉", value: randomData() },
              { name: "洛阳", value: randomData() },
              { name: "太原", value: randomData() },
              { name: "长春", value: randomData() },
              { name: "玉溪", value: randomData() },
            ],
          },
        ],
      },
      chartSettings: {
        mode: "effectScatter",
        mapName: "china",
        visualMapVisible: true,
        visualMap: {
          inRange: { color: ["#4af", "#1ea"] },
          textStyle: {
            color: "#fff",
          },
        },
        labelVisible: true,
        itemStyle: {
          normal: {
            areaColor: "transparent",
            borderColor: "#3fdaff",
            borderWidth: 1,
            shadowColor: "rgba(63, 218, 255, 0.5)",
            shadowBlur: 30,
          },
          emphasis: {
            areaColor: "#2B91B7",
          },
        },
        label: {
          normal: {
            show: true,
            color: "#1af",
            fontSize: 13,
          },
          emphasis: {
            show: true,
            color: "#fff",
          },
        },
        symbolSize: 15,
      },
    };
  },
  methods: {
    onClick(e) {
      this.title = {
        text: `选中：${e.name}`,
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
      };
      const idx = this.provinceInfo.findIndex((v) => v.name === e.name);
      if (idx !== -1) {
        const province = this.provinceInfo[idx].pinyin;
        this.chartSettings.mapName = `province/${province}`;
      } else {
        this.chartSettings.mapName = "china";
      }
    },
    onClickBlank(e) {
      this.title = {
        text: `选中：空白处`,
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
      };
      this.chartSettings.mapName = "china";
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
</style>
